/*eslint-disable*/
import store from "../store"
import { useSnapshot } from "valtio"
import { getContrastingColor } from '../config/helpers';

const CustomButton = ({
  type,
  title,
  handleClick,
  customStyles
}) => {
  const snap = useSnapshot(store)
  const generateStyle = (type) => {
    switch (type) {
      case 'filled':
        return {
          backgroundColor: snap.color,
          color: getContrastingColor(snap.color)
        }
      case 'outline':
        return {
          borderWidth: '1px',
          borderColor: snap.color,
          color: snap.color
        }
      default:
        return {
          backgroundColor: snap.color,
          color: getContrastingColor(snap.color)
        }
    }
  }
  return (
    <button
    className={`px-2 py-1.5 flex-1 rounded-md ${customStyles}`}
    style={generateStyle(type)}
    onClick={handleClick}
  >
    {title}
  </button>
  )
}

export default CustomButton
